<template>
	<view>
		<!-- 商品名称 -->
		<view class="w335 fs14">
			<text style="font-weight: 700;">商品名称</text>
			<input class="fs14" style="height: 104rpx;margin-left: 40rpx;" value=""  placeholder="新疆嘎啦苹果" />
			<text class="fs13" style="color: #9E9E9E;margin-left: 30rpx;">选择分类</text>
			<image src="../../../static/iconfh.png" mode=""></image>
		</view>
		<!-- 商品单价 -->
		<view class="w335 fs14">
			<text style="font-weight: 700;">商品单价</text>
			<view style="margin-left: 40rpx;">
				<text class="fs10 red">￥</text><text class="fs16 red">18.8</text>
			</view>
		</view>
		<!-- 折扣价格 -->
		<view class="w335 fs14">
			<text style="font-weight: 700;">折扣价格</text>
			<input class="fs14" style="height: 104rpx;margin-left: 40rpx;" value=""  placeholder="选填" />
		</view>
		<!-- 商品规格 -->
		 <view class="w335 fs14"style="height: 186rpx; position: relative;">
		 	<text style="font-weight: 700;">商品规格</text>
		 	<view style="margin-left: 40rpx; position: relative;width: 500rpx;">
		 		<text class="fs14" style="color:#AFAFAF;">（斤数/个数等规格)</text>
				<text class="wrt">添加规格</text>
		 	</view>
			<text class="yig">1个</text>
		 </view>
		 <!-- 商品库存 -->
		 <view class="w335 fs14">
		 	<text style="font-weight: 700;">商品名称</text>
		 	<input  class="fs14" type="number" style="height: 104rpx;margin-left: 40rpx;" value="" placeholder="情输入数量" />
		 </view>
		 <!-- 商品主图 -->
		 <view class="w335 fs14" style="height: 100%!important;flex-wrap:wrap">
		 	<text style="font-weight: 700;">商品主图</text>
			<text class="fs14" style="color:#AFAFAF;">（最多5张)</text>
			<view class="spzt" style="width: 100%;">
				<image class="portrait" src="../../../static/icon+tu.png"></image>
				<image class="portrait" src="../../../static/icon+tu.png"></image>
				<image class="portrait" src="../../../static/icon+tu.png"></image>
			</view>
		</view>
		<!-- 商品详情图 -->
		<view class="w335 fs14" style="height: 100%!important;flex-wrap:wrap">
		 	<text style="font-weight: 700;">商品主图</text>
			<view class="spzt" style="width: 100%;">
				<image class="portrait" src="../../../static/icon+tu.png"></image>
				<image class="portrait" src="../../../static/icon+tu.png"></image>
				<image class="portrait" src="../../../static/icon+tu.png"></image>
			</view>
		</view>
		<!-- 底部 -->
		<view class="bottom">
			<text style="left: 15%;">删除商品</text>
			<text style="left: 55%;background: linear-gradient(142deg,#2ed993 3%, #20b47a 93%);">保存</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
 .w335{
	 width: 670rpx;
	 height: 104rpx;
	 line-height: 104rpx;
	 margin: 0 auto;
	 display: flex;
	 border-bottom: 1rpx solid #DFDFDF;
 }
 .w335>image{
	 width: 10rpx;
	 height: 18rpx;
	 top: 43rpx;
	 right:-15rpx;
 }
 .red{
	 color: #FE5E41;
 }
 .wrt{
	 width: 140rpx;
	 height: 52rpx;
	 line-height: 52rpx;
	 text-align: center;
	 color: #FFFFFF;
	 border-radius: 10rpx;
	 background: linear-gradient(150deg,#2ed993 0%, #20b47a 94%);
	 position: absolute;
	 right: 0;
	 top: 30rpx;
 }
 .yig{
	 width: 120rpx;
	 height: 52rpx;
	 text-align: center;
	 line-height: 52rpx;
	 border-radius: 10rpx;
	 border: 1rpx solid #9A9A9A;
	 position: absolute;
	 top: 100rpx;
 }
 .portrait{
	 width: 132rpx!important;
	 height: 132rpx!important;
 }
 .spzt>image{
	 margin-right: 20rpx;
 }
 .bottom{
	 height: 100rpx;
	 background: ;
	 position: relative;
 }
 .bottom>text{
	 width:208rpx;
	 height: 66rpx;
	 text-align: center;
	 line-height: 66rpx;
	 border: 1rpx solid #BEBEBE;
	 border-radius: 15rpx;
	 position: absolute;
	 top: 20rpx;
 }
</style>
